<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入科室名称" class="input"
                                      size="small"></el-input>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                            <el-button class="info" @click="exportExcelData()" size="small">导出</el-button>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" @click="updateById()" size="small">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :stripe="true">
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" @click="updateById(scope.row)">修改
                                </el-link>
                                <el-link type="primary" :underline="false" @click="deleteById(scope.row.id)">删除
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                    <dialog-msk :show.sync="updateFormVisible" ref="explainEdit" :title="title" :width="'480px'"
                                @save="saveDialog" @cancel="closeDialog">
                        <el-form class="form-common" :model="deptInfo" :rules="rules" ref="ruleForm"
                                 size="small" label-width="130px" :label-position="'left'">
                            <el-form-item label="科室名称" prop="name">
                                <el-input v-model="deptInfo.name" filterable class="full"
                                          size="small" placeholder="请输入科室名称">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="选择位置信息" prop="floorInfoId">
                                <div class="block">
                                    <el-cascader class="full"
                                                 v-model="deptInfo.floorInfoId"
                                                 :props="{label: 'name',value:'id',leaf:'show'}"
                                                 :options="bulidInfoTreeList"></el-cascader>
                                </div>
                            </el-form-item>
                        </el-form>
                    </dialog-msk>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import dialogMsk from '../components/dialog'
    import qs from 'qs'

    export default {
        data() {
            return {
                updateFormVisible: false,
                addFormVisible: false,
                DirMigration: false,
                name: '', // 姓名
                tableData: [],
                deptInfo: {
                    name: '',
                    floorInfoId: []
                },
                currentDeptInfo: null,
                rules: {
                    name: [
                        {required: true, message: '请填写科室名称', trigger: 'blur'}
                    ],
                    floorInfoId: [
                        {required: true, message: '请选择位置信息', trigger: 'change'}
                    ]
                },
                header: [
                    {
                        prop: 'name',
                        label: '科室名称',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'buliding',
                        label: '楼宇',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'floor',
                        label: '楼层',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation'],
                page: {},
                index: 1,
                loading: false,
                bulidInfoTreeList: [],
                title: '修改科室信息'
            }
        },
        mounted() {
            this.getList()
            this.getBulidInfo()
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/hsDepartment/getDeptPageList', {
                    name: this.name,
                    type: this.permission,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getBulidInfo(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/bulidingFloorInfo/getTreeList').then(result => {
                    this.loading = false
                    if (result.success) {
                        this.bulidInfoTreeList = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                this.name = ''
                this.getList(1)
            },
            updateById(row) {
                if (row) {
                    this.title = '修改科室信息'
                } else {
                    this.title = '新增科室信息'
                }
                this.updateFormVisible = true
                if (row) {
                    this.currentDeptInfo = row
                    let idList = row.floorInfoId.split(',')
                    idList = idList.map(e => {
                        return Number(e)
                    })
                    this.deptInfo = {
                        name: row.name,
                        floorInfoId: idList
                    }
                }
            },
            // 取消弹框
            closeDialog() {
                this.$refs.ruleForm.resetFields()
                this.updateFormVisible = false
                this.deptInfo = {
                    name: '',
                    floorInfoId: []
                }
                this.currentDeptInfo = null
            },
            saveDialog() {
                let _this = this
                this.validate('ruleForm', () => {
                    this.submitUpdateOrAdd(function () {
                        _this.closeDialog()
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            submitUpdateOrAdd(callback) {
                this.loading = true
                // this.updateFormVisible = false
                // let _this = this
                this.$http.post('/hsDepartment/updateDeptOrAddDept', {
                    name: this.deptInfo.name,
                    floorInfoId: this.deptInfo.floorInfoId.join(','),
                    id: (this.currentDeptInfo && this.currentDeptInfo.id) || null
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.$message.success({
                            message: this.currentDeptInfo ? '修改信息成功' : '添加信息成功',
                            showClose: true
                        })
                        if (callback) callback()
                        this.getList()
                    } else {
                        this.loading = false
                    }
                })
            },
            deleteById(id) {
                let _this = this
                this.$method.messageBox('confirm', '确定要删除该科室信息吗', (action, instance) => {
                    if (action === 'confirm') {
                        _this.loading = true
                        _this.$http.post('/hsDepartment/delDeptById', {
                            id: id
                        }).then(result => {
                            _this.loading = false
                            _this.getList()
                        })
                    }
                }, '', false, false)
            },
            exportExcelData() {
                let params = {
                    name: this.name
                }, url = '/_api/hsDepartment/downLoadDeptListToExcel'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            }
        },
        components: {
            tableExample,
            page,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">

</style>
